<template>
	<view class="exam-container">
		<!-- 顶部标题 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">知识测试</text>
				<text class="header-subtitle">检验你的学习成果</text>
			</view>
			<view class="test-badge">
				<text class="badge-icon">🏆</text>
			</view>
		</view>

		<!-- 测试通道列表 -->
		<scroll-view class="channel-scroll" scroll-y>
			<!-- 可用通道 -->
			<view class="section">
				<text class="section-title">可用测试</text>
				<view class="channel-list">
					<view 
						v-for="channel in availableChannels" 
						:key="channel.id"
						class="channel-card"
						@click="handleStartExam(channel)"
					>
						<!-- 顶部渐变条 -->
						<view class="card-gradient" :style="{ background: channel.gradient }"></view>
						
						<view class="card-body">
							<!-- 头部信息 -->
							<view class="card-header">
								<text class="channel-icon">{{ channel.icon }}</text>
								<view class="channel-info">
									<text class="channel-name">{{ channel.name }}</text>
									<text class="channel-difficulty">难度：{{ channel.difficulty }}</text>
								</view>
								<view class="start-button">
									<text class="start-icon">▶</text>
								</view>
							</view>

							<!-- 描述 -->
							<text class="channel-description">{{ channel.description }}</text>

							<!-- 标签 -->
							<view class="channel-tags">
								<view v-for="(tag, index) in channel.tags" :key="index" class="tag">
									<text class="tag-text">{{ tag }}</text>
								</view>
							</view>

							<!-- 底部信息 -->
							<view class="card-footer">
								<view class="info-item">
									<text class="info-icon">📝</text>
									<text class="info-text">10题</text>
								</view>
								<view class="info-item">
									<text class="info-icon">⏱</text>
									<text class="info-text">20分钟</text>
								</view>
								<view class="info-item">
									<text class="info-icon">⭐</text>
									<text class="info-text">100分</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 未开放通道 -->
			<view class="section" v-if="unavailableChannels.length > 0">
				<text class="section-title">敬请期待</text>
				<view class="channel-list">
					<view 
						v-for="channel in unavailableChannels" 
						:key="channel.id"
						class="channel-card channel-disabled"
						@click="handleComingSoon"
					>
						<!-- 顶部渐变条 -->
						<view class="card-gradient" :style="{ background: channel.gradient }"></view>
						
						<view class="card-body">
							<!-- 头部信息 -->
							<view class="card-header">
								<text class="channel-icon">{{ channel.icon }}</text>
								<view class="channel-info">
									<text class="channel-name">{{ channel.name }}</text>
									<text class="channel-difficulty">难度：{{ channel.difficulty }}</text>
								</view>
							</view>

							<!-- 描述 -->
							<text class="channel-description">{{ channel.description }}</text>

							<!-- Coming Soon遮罩 -->
							<view class="coming-soon-mask">
								<text class="coming-soon-text">Coming Soon</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { getAllExamChannels } from '@/services/exam';
	import type { ExamChannel } from '@/types/exam';

	// 测试通道列表
	const channels = ref<ExamChannel[]>(getAllExamChannels());

	// 可用通道
	const availableChannels = computed(() => {
		return channels.value.filter(c => c.isAvailable);
	});

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});


	// 未开放通道
	const unavailableChannels = computed(() => {
		return channels.value.filter(c => !c.isAvailable);
	});

	// 开始测试
	const handleStartExam = (channel: ExamChannel) => {
		// 跳转到分类选择页面
		uni.navigateTo({
			url: `/pages/exam/category?channelId=${channel.id}`
		});
	};

	// 未开放提示
	const handleComingSoon = () => {
		uni.showToast({
			title: '该测试通道正在准备中',
			icon: 'none',
			duration: 2000
		});
	};
</script>

<style lang="scss" scoped>
	.exam-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
		padding-right: 20rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	.test-badge {
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.4);
	}

	.badge-icon {
		font-size: 48rpx;
	}

	/**
	 * 滚动区域
	 */
	.channel-scroll {
		flex: 1;
		padding: 24rpx 24rpx 0;
		width: 100%;
		box-sizing: border-box;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #1a202c;
		display: block;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	.channel-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/**
	 * 通道卡片
	 */
	.channel-card {
		background: white;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
	}

	.channel-disabled {
		opacity: 0.7;
	}

	.card-gradient {
		height: 8rpx;
		width: 100%;
	}

	.card-body {
		padding: 28rpx;
		position: relative;
	}

	/**
	 * 卡片头部
	 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.channel-icon {
		font-size: 64rpx;
		line-height: 1;
	}

	.channel-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.channel-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.2;
	}

	.channel-difficulty {
		font-size: 24rpx;
		color: #64748b;
		font-weight: 600;
	}

	.start-button {
		width: 72rpx;
		height: 72rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
	}

	.start-icon {
		font-size: 32rpx;
		color: white;
		margin-left: 4rpx;
	}

	/**
	 * 描述
	 */
	.channel-description {
		font-size: 26rpx;
		color: #64748b;
		line-height: 1.6;
		margin-bottom: 20rpx;
		display: block;
	}

	/**
	 * 标签
	 */
	.channel-tags {
		display: flex;
		gap: 12rpx;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
	}

	.tag {
		padding: 8rpx 16rpx;
		background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
		border-radius: 10rpx;
		border: 1rpx solid #cbd5e1;
	}

	.tag-text {
		font-size: 22rpx;
		color: #475569;
		font-weight: 600;
	}

	/**
	 * 底部信息
	 */
	.card-footer {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		border-top: 2rpx solid #f1f5f9;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.info-icon {
		font-size: 28rpx;
	}

	.info-text {
		font-size: 24rpx;
		font-weight: 700;
		color: #667eea;
	}

	/**
	 * Coming Soon遮罩
	 */
	.coming-soon-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(4rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coming-soon-text {
		font-size: 32rpx;
		font-weight: 800;
		color: #94a3b8;
		text-transform: uppercase;
		letter-spacing: 2rpx;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

